<template>
   <div class="crumbs">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>财务管理</el-breadcrumb-item>
        <el-breadcrumb-item>兑换列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container">

    	<div class="search">
    		<el-row type="flex"  justify="space-between">
    			<el-col :span="3">
    				<el-input v-model="search.member_id" placeholder="会员ID" clearable></el-input>
    			</el-col>
    			<el-col :span="3">
    				<el-select v-model="search.from_type" placeholder="转换类型">
                        <el-option
                            v-for="(name,index) in typeName"
                            :key="index"
                            :value="index"
                            :label="name">
                        </el-option>
                    </el-select>
                </el-col>
    			<el-col :span="3">
    				<el-select v-model="search.to_type" placeholder="转换后的类型">
    			        <el-option
    			            v-for="(name,index) in typeName"
    			            :key="index"
    			            :value="index"
    			            :label="name">
    			        </el-option>
    			    </el-select>
                </el-col>
    			<el-col :span="4">
    				<el-select v-model="search.state" placeholder="请选择兑换状态">
                        <el-option
                            v-for="(name,index) in stateArr"
                            :key="index"
                            :value="index"
                            :label="name">
                        </el-option>
                    </el-select>
    			</el-col>
    		</el-row>
    		<el-row style="margin-top: 10px;">
    			<el-col :span="4" :offset='0'>
    				<el-button :loading="ifload" type="primary" @click="searchRes" icon="el-icon-search">搜索</el-button>
    				<!-- <el-button :loading="ifload" type="danger" @click="exportExecl" icon="el-icon-download">导出</el-button> -->
    			</el-col>
    		</el-row>
    	</div>
       </div>
    <el-table
     :data="datalist"
     border
     style="width: 100%">
     </el-table-column>
    <el-table-column
       prop="id"
        align="center"
       label="兑换记录id"
       width="60">
     </el-table-column>
     <el-table-column
       prop="member_id"
       label="用户ID"
         align="center"
       width="60">
     </el-table-column>
     <el-table-column
       prop="from_money"
       label="转换的金额"
         align="center"
       width="80">
     </el-table-column>
     <el-table-column
       prop="to_money"
         align="center"
       label="转换后的金额"
       width="80">
     </el-table-column>
     <el-table-column
       prop="from_type"
         align="center"
       label="转换类型"
       width="80">
       <template slot-scope="scope">
           <span>{{typeName[scope.row.from_type]}}</span>
       </template>
     </el-table-column>
     <el-table-column
       prop="to_type"
         align="center"
       label="转换后的类型"
       width="80">
       <template slot-scope="scope">
           <span>{{typeName[scope.row.to_type]}}</span>
       </template>
     </el-table-column>
     <el-table-column
       prop="price1"
         align="center"
       label="转换类型的价格"
       width="80">
     </el-table-column>
     <el-table-column
       prop="price2"
         align="center"
       label="转换后的类型的价格"
       width="80">
     </el-table-column>
     <el-table-column
       prop="fee"
         align="center"
       label="手续费"
       width="80">
     </el-table-column>
     <el-table-column
       prop="state"
       align="center"
       label="状态"
       width="80">
       <template slot-scope="scope">
           <span>{{stateArr[scope.row.state]}}</span>
       </template>
     </el-table-column>
     <el-table-column
       prop="create_time"
       align="center"
       label="创建时间"
       width="150">
       <template slot-scope="scope">
           <span>{{formatDateTime(scope.row.create_time)}}</span>
       </template>
     </el-table-column>

     <el-table-column
         align="center"
     	label="操作">
         <template slot-scope="scope">
             <div v-if="scope.row.state==2">
             <el-button type="text" icon="el-icon-document" @click="handleEidt(scope.row)">
     		修改
     		</el-button>
            </div>
            <div v-if="scope.row.state!=2">
             <el-button type="text" icon="el-icon-document" :disabled="true">
            修改
            </el-button>
            </div>
            <!-- <el-button type="text" icon="el-icon-delete" class="red" @click="handleDel(scope.$index, scope.row)">
     		删除
     		</el-button> -->
         </template>
     </el-table-column>
   </el-table>
    <!-- <div class="pagination">
        <el-pagination background
    		@current-change="handleCurrentChange"
    		layout="prev, pager, next"
    		:total="pages"
    		:page-size="page_size">
        </el-pagination>
    </div> -->
    <div class="pagination">
        <el-pagination background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next"
            :total="pages">
        </el-pagination>
    </div>

   </div>
</template>

<script>

    export default {
          data() {
              return{
                  //翻页
                ifload:true,
                page:1,
                page_size:10,
                pages:1,
                //投资列表
                datalist:[],
                typeName:[],
                stateArr:['未完成','已完成','待审核','驳回'],
                search:{
                	member_id:'',
                	from_type:'',
                	to_type:'',
                    state:'',
                },
              }
          },
            methods:{
                formatDateTime(timeStamp) {
                    var date = new Date();
                    date.setTime(timeStamp * 1000);
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    m = m < 10 ? ('0' + m) : m;
                    var d = date.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    var h = date.getHours();
                    h = h < 10 ? ('0' + h) : h;
                    var minute = date.getMinutes();
                    var second = date.getSeconds();
                    minute = minute < 10 ? ('0' + minute) : minute;
                    second = second < 10 ? ('0' + second) : second;
                    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
                },

                //搜索
                searchRes() {
                	this.page = 1;
                	this.getData();
                },
                getData(){
                      let params = {
                          page:this.page,
                          page_size:this.page_size,
                          search:JSON.stringify(this.search),

                      }
                  this.ifload = true;
                  this.$post_('finance/exchange/exchange-list',params,(res) => {
                      this.ifload = false;
                      if(res.code ==0){
                          this.datalist = res.data
                          this.pages = Number(res.extend.pages);
                          this.typeName = res.extend.type_name
                          console.log(this.typeName);
                      }
                  })
                },
                handleBj(row){
                    console.log(row)
                     this.$router.push({path:'/page/invest/invest_edit',query:{commodity_id:row.commodity_id} });
                },
                handleCurrentChange(val){
                    this.page = val
                    this.getData()
                },
                handleSizeChange(val) {
                    this.page_size = val;
                    this.page = 1;
                    this.getData();
                },
                handleAdd(){
                     this.$router.push({path:'/page/finance/exchange_add'})
                },
                //修改
                handleEidt(row) {
                    this.$router.push({path:'/page/finance/exchange_edit',query:{id:row.id}});
                },
          },
          created(){
              this.getData()
          }
    }
</script>

<style>
</style>
